<template>
    <div class="search">
        <div class="header-search">
            <router-link to="/home">
                <div class="mui-icon mui-icon-back"></div>
            </router-link>
            <input
                    class="search-input"
                    type="text"
                    placeholder="周杰伦"
                    @keyup.enter="goSearch()"
                    v-model="keywords"
            />
            <div class="search-btn" @click="goSearch()">
                <svg class="icon">
                    <use xlink:href="#icon-sousuo"></use>
                </svg>
            </div>
            <nav class="searchList-nav" ref="change">
                <div
                        :class="{ isActive: toggle == 'Songs' }"
                        @click="handleChangeView('Songs')"
                        size="small"
                >
                    歌曲
                </div>
                <div
                        :class="{ isActive: toggle == 'SongLists' }"
                        @click="handleChangeView('SongLists')"
                        size="small"
                >
                    歌单
                </div>
            </nav>
        </div>
        <div class="search-content">
            <component :is="currentView"></component>
        </div>
    </div>
</template>

<script>
    import SearchSongs from "../components/SearchSongs";
    import SearchSongLists from "../components/SearchSongLists";
    export default {
        inject: ["reload"],
        name: "Search",
        components: {
            SearchSongs,
            SearchSongLists,
        },
        data() {
            return {
                keywords: "", // 搜索关键字
                toggle: "Songs",
                currentView: "SearchSongs",
            };
        },
        created() {},
        mounted() {},
        watch: {},
        methods: {
            goSearch() {
                this.$router.push({
                    path: "/search",
                    query: { keywords: this.keywords },
                });
                this.reload();
            },
            //切换组件
            handleChangeView(component) {
                this.currentView = "Search" + component;
                this.toggle = component;
            },
        },
    }
</script>

<style lang="scss" scoped>
    // color
    $color-white: #ffffff;
    $color-white-dark: #f7f7f7;
    $color-grey: #8e98a2;
    $color-red: #e1594b;
    $color-blue: #26a2ff;
    $color-blue-dark: #48658f;
    $color-black: black;

    // distance
    $padding-out: 0 0.5em;
    ul, li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    .search {
    .header-search {
        margin-top: -40px;
        z-index: 999;
        position: absolute;
        width: 100%;
    .mui-icon-back {
        color: $color-blue-dark;
        position: absolute;
        top:.25em
    }
    .search-btn {
        color: $color-blue;
        position: absolute;
        top: -3.25em;
        right: 1.75em;
        width: 1em;
        height: 1em;
    .icon {
        width: 100%;
        height: 100%;
    }
    }
    // 搜索栏
       .search-input {
           margin: 0;
           border: none;
           border-bottom: 1px solid $color-grey;
           text-indent: 1em;
       }
    // 搜索栏下的按钮
       .searchList-nav {
           padding-top: 0.25em;
           margin-bottom: 1em;
           background-color: #fff;
           color: $color-grey;
    div {
        display: inline-block;
        width: 45%;
    }
    }
    }
    }
    // 按钮激活状态
       .isActive {
           color: $color-black;
           border-bottom: 0.25em solid $color-blue;
       }
    .search-content{
        padding-top: 40px;
    }
    .search-play-bar{
        bottom: 0;
    }

</style>
